<template>
  <div class="card-text">
    <div class="news-item-text">
      <div class="news-item-line"></div>
      <div class="news-item-tag">
        Lifestyle
      </div>
      <h4 class="news-item-title">
        Welcome to this Lifestyle blog
      </h4>
      <p class="news-item-content">
        Curabitur venenatis efficitur lorem sed tempor. Integer aliquet tempor cursus. Nullam vestibulum convallis risus
        vel condimentum. Nullam auctor lorem in libero luctus, vel volutpat quam tincidunt. Morbi sodales, dolor id
        ultricies dictum
      </p>
      <button class="news-item-btn">Read More</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'card-text'
}
</script>

<style scoped lang="less">
  .card-text {
    .news-item-line {
      width: 26px;
      height: 2px;
      background: #c8c8c8;
      margin-bottom: 20px;
    }
    .news-item-tag {
      color: #a1a1a1;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 3px;
      margin-bottom: 10px;
      display: block;
    }
    .news-item-title {
      display: inline-block;
      color: #000000;
      font-size: 24px;
      margin-bottom: 30px;
    }
    .news-item-content {
      color: #878787;
      font-size: 14px;
      line-height: 2;
    }
    .news-item-btn {
      position: relative;
      z-index: 1;
      padding: 0 30px;
      min-width: 175px;
      height: 60px;
      border: 1px solid;
      border-color: #dcdcdc;
      font-size: 14px;
      border-radius: 0;
      line-height: 59px;
      text-transform: uppercase;
      letter-spacing: 3px;
      font-family: "Open Sans", sans-serif;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
      color: #000000;
      margin-top: 50px;
      background: #ffffff;
    }
    .news-item-btn:hover {
      background-color: #30336b;
      color: #ffffff;
      border-color: #30336b;
      transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
  }
</style>
